<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>고객센터</title>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    	<script src="/resources/js/html5shiv.js"></script>
    	<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
		#topmenu li:hover,
    	#topmenu li:focus{
    		background-color:#F6F7F8;
    	}
    	#topmenu .active,
    	#topmenu .active:hover,
    	#topmenu .active:focus{
    		background-color:#F6F7F8;
    	}
    	
    	#topmenu li{
    		text-align:left;
    		display: block;
    		padding: 14px 0 14px 10px;
    		border-bottom: 1px #DBDBDB solid;
    		cursor: pointer;
    	}
    	   	
    	#topmenu li.active,
    	#topmenu li.active *{
    		background-color:#F6F7F8;
    	}
    	.tabMenu{
    		margin:0;
    		padding-bottom: 0!important;
    		display: block;
    		width: 100%;
    		background-color: #fff;
    		border:1px #DFE0E4 solid;
    		border-bottom-color: #D0D1D5!important;
    		border-radius: 3px;
    	}
    	
		.arrow{ color: #ADADAD; margin-right: 6px; }
		.panel { border-radius:0!important; position: relative; }
		.panel-heading { padding:0!important; }
		.accordion-toggle{ display: block; padding: 10px 15px; }
		.accordion-toggle:hover { text-decoration: none; font-weight: bold; }
		.panel-time { color: #999; position: absolute; font-size: 13px; right: 5px; font-weight: normal!important; }
		.panel-reply { margin-left: 8px; font-size: 12px; background-color: #B4B4B4; border-radius:3px; font-weight: normal!important; padding:2px; color: #fff; }
		@media (max-width: 768px){ #inquiry, #myInquiry{ margin:15px;} }
    </style>
  	</head>

  	<body>
  	<div id="viewport">
	<div id="page">
  	<!-- header -->
		<jsp:include page = "head.jsp" flush="false"/>
  	<!-- end header -->
  	
    <!-- content -->
	<div class="container" style="margin-top:20px;">
		<h4>죄송합니다<br>현재 고객센터는 준비중이므로 1:1문의만 가능합니다.</h4>
	</div>
	<div class="container" style="margin-top:35px;">
		<div class="row">
			<div class="col-lg-2">
	   			<div class="tabMenu">
		   			<ul class="list-unstyled" id="topmenu" style="margin-bottom: 0;">
		   				<li class="active" id="menu1">1:1 문의</li>
		   				<li id="menu2">나의 문의</li>
		   			</ul>
	   			</div>
	   		</div>
			
			<div id="inquiry" class="col-lg-8 well" style="background-color: #fff;">
				<h4>1:1 문의하기</h4><hr><br>
				<form class="form-horizontal" role="form" id="inquiryForm">
					<input type="hidden" id="member_idx" name="member_idx" value="${userDto.idx}">
		   			<div class="form-group">
						<label for="name" class="col-lg-2 control-label">이름</label>
						<div class="col-lg-3">
							<input type="text" class="form-control" id="name" name="name" maxlength="20" placeholder="이름을 입력해주세요" value="${userDto.name}">
						</div>
					</div>
					
					<c:if test="${userDto eq null}">
					<div class="form-group">
						<label for="email" class="col-lg-2 control-label">이메일</label>
						<div class="col-lg-4">
							<input type="text" class="form-control" id="email" name="email" maxlength="40" placeholder="이메일을 입력해주세요">
						</div>
					</div>
					</c:if>
					
					<div class="form-group">
						<label for="title" class="col-lg-2 control-label">제목</label>
						<div class="col-lg-10">
							<input type="text" class="form-control" id="title" name="title" maxlength="50" placeholder="제목을 입력해주세요">
						</div>
					</div>
					
					<div class="form-group">
						<label for="content" class="col-lg-2 control-label">내용</label>
						<div class="col-lg-10">
							<textarea id="content" name="content" class="form-control" rows="6" maxlength="1000" style="resize:vertical;" placeholder="내용을 입력해주세요"></textarea>
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-lg-12 text-right">
							<button type="button" id="inquiryBtn" class="btn btn-primary">문의하기</button>
						</div>
					</div>
   				</form>
			</div>
			
			<div id="myInquiry" class="col-lg-10 well" style="background-color: #fff; display: none;">
				<h4>나의 문의</h4><hr><br>
				<div class="panel-group" id="inquiryList">
				</div>
				<div id="loadingAjaxImg" style="text-align:center; padding:25px 0; display: none;"><img src="/resources/img/loading-20x20-white.gif" /></div>
			</div>
		</div>
	</div>
    <!-- end content -->
    
	</div><!-- end page -->
	<%@ include file="commonScript.jsp" %>
	</div><!-- end viewport -->
	<script type="text/javascript">
	    $(function(){
	    	var mobile = location.href.split("?")[1];
	   		if(typeof mobile != "undefined"){
	   			if(mobile == "mobile"){
	   				$(".header").hide();
	   	   			$(".mobile-footer-menu").remove();
	   	   			$("body").css("background-image","none");
	   			}
	   		}
	    	$("#menu1").click(function(){
	    		$("#myInquiry").hide();
	    		$("#menu2").removeClass("active");
	    		$("#inquiry").show();
	    		$("#menu1").addClass("active");
	    	});
	    	$("#menu2").click(function(){
	    		if("${userDto.idx}" == "") {alertShow("danger","로그인이 필요합니다", 2000); return false; }
	    		$("#inquiry").hide();
	    		$("#menu1").removeClass("active");
	    		$("#myInquiry").show();
	    		$("#menu2").addClass("active");
	    	});
	    	
	    	$("#inquiryBtn").click(function(){
	    		if($("#member_idx").val() == "") $("#member_idx").val(0);
	    		if($("#name").val() == ""){
	    			$("#name").parent().parent().addClass("has-error");
	    			alertShow("danger","이름을 입력해주세요", 2000);
	    			return false;
	    		}
	    		if($("#email").val() == "" && $("#member_idx").val() == 0){
	    			$("#email").parent().parent().addClass("has-error");
	    			alertShow("danger","이메일을 입력해주세요", 2000);
	    			return false;
	    		}
	    		if($("#title").val() == ""){
	    			$("#title").parent().parent().addClass("has-error");
	    			alertShow("danger","제목을 입력해주세요", 2000);
	    			return false;
	    		}
	    		if($("#content").val() == ""){
	    			$("#content").parent().parent().addClass("has-error");
	    			alertShow("danger","내용을 입력해주세요", 2000);
	    			return false;
	    		}
	    		var data = $("#inquiryForm").serialize();
	    		$.ajax({
				    type : "get"
				    , url : "/inquiryWrite"
				    , data : data
				    , dataType : "text"
				    , timeout : 5000
				    , error : function() {
				    	alertShow("danger","다시 시도해 주세요", 2000);
				    }
				    , success : function(response) {
				    	if(response == "execute"){
				    		$("#inquiryForm").each(function(){
			    				this.reset();
			    			});
				    		if("${userDto.idx}" != ""){
				    			$("#inquiryList").empty();
					    		$("#loadingAjaxImg").show();
					    		$("#inquiry").hide();
					    		$("#menu1").removeClass("active");
					    		$("#myInquiry").show();
					    		$("#menu2").addClass("active");
				    			alertShow("success","전송되었습니다", 2000);
				    			setTimeout(function(){
					    			getInquiryList();
					    		}, 1000);
				    		}else{
				    			alertShow("info","<strong><i class='fa fa-check'></i></strong>&nbsp;전송되었습니다<br>비회원 문의는 답변이 메일로 전송됩니다. 답변에는 최대 일주일이 소요될 수 있습니다.", null);
				    		}
				    		
				    	}else{
				    		alertShow("danger","다시 시도해 주세요", 2000);
				    	}
				    }
				});
	    	});
	    	if("${userDto.idx}" != ""){
	    		getInquiryList();
	    	}
	    });
	    
	    function getInquiryList(){
	    	$.ajax({
				type : "get"
				, url : "/getMyInquiry?idx=${userDto.idx}"
				, dataType : "json"
				, timeout : 5000
				, error : function(request, status, error) {
					//$("#notices").append("<h3></h3>");
				}
				, success : function(response) {
					for(var i=0;i<response.length;i++){
						var reply = "";
						var replyContent ="";
						if(response[i].is_reply == "true"){
							reply = "<span class='panel-reply' style='color:#001FFF;background-color:#DBDBDB;'>답변완료</span>";
							replyContent ="<div><hr>답변내용 : <br><br><div></div>"+response[i].reply_content+"</div>";
						}else{
							reply = "<span class='panel-reply'>확인중..</span>";
							replyContent ="<div><hr>답변내용 : <br><br><div>확인중입니다. 잠시만 기다려주세요</div></div>";
						}
						var html =  "<div class='panel panel-default' id='panel"+i+"'><div class='panel-heading'><a class='accordion-toggle panel-title' data-toggle='collapse' data-parent='#inquiryList' href='#view"+i+"'><i class='fa fa-chevron-right arrow'></i>"+response[i].title+reply+"<span class='panel-time'>"+response[i].createdate.substring(0,10)+"</span></a></div><div id='view"+i+"' class='panel-collapse collapse'><div class='panel-body'>"+response[i].content.replace(/\n/g, "<br />")+replyContent+"</div></div></div>";
						$("#inquiryList").append(html);
					}
					if(response.length == 0){
						$("#inquiryList").html("<div style='text-align:center; color:#888;'>문의내역이 없습니다</div>");
					}
					$('.panel').on('show.bs.collapse', function (e) {
			   			$("#"+e.currentTarget.id).find(".panel-title").children("i").removeClass("fa-chevron-right").addClass("fa-chevron-down");
			   		}).on('hide.bs.collapse', function (e) {
			   			$("#"+e.currentTarget.id).find(".panel-title").children("i").removeClass("fa-chevron-down").addClass("fa-chevron-right");
			   		});
				}
				, beforeSend: function() {
					$("#loadingAjaxImg").show();
				}
				, complete: function() {
					$("#loadingAjaxImg").hide();
				}
			});
	    }
    </script>
  </body>
</html>